<template>
  <div class="table-box">
    <ProTable title="api权限" ref="ProRef" :request-api="GetApis" :columns="columns">
      <template #tableHeader>
        <el-button type="primary" @click="addApi()">新增API</el-button>
      </template>
      <template #create_time="{ row }">
        {{ dayjs(row.create_time).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template #apiGroup="{ row }">
        {{ row.apiGroup }}
      </template>
      <template #operation="{ row }">
        <el-button type="primary" :icon="EditPen" link @click="editApi(row)">编辑</el-button>
        <el-button type="primary" :icon="Delete" link>删除</el-button>
      </template>
    </ProTable>
    <ApiDrawer ref="ApiRef"></ApiDrawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { GetApis, GetApisGroup } from "@/api/modules/routes";
import ApiDrawer from "./components/ApiDrawer.vue";
import { ref } from "vue";
import { AddApis, EditApis } from "@/api/modules/routes";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { ColumnProps } from "@/components/ProTable/interface";
import dayjs from "dayjs";

const ProRef = ref<InstanceType<typeof ProTable> | null>();

// -----表格
const GetApisType = () => {
  return new Promise((res, rej) => {
    res({ data: [{ name: "GET" }, { name: "POST" }, { name: "PUT" }, { name: "DELETE" }] });
    rej(false);
  });
};

const columns: ColumnProps[] = [
  { type: "select", width: 50 },
  { prop: "apiName", label: "API名称", search: { el: "input" }, width: 200 },
  { prop: "apiPath", label: "API路径", search: { el: "input" } },
  {
    prop: "apiGroup",
    label: "API分组",
    search: { el: "select" },
    enum: GetApisGroup,
    width: 200,
    fieldNames: { label: "apiGroup", value: "apiGroup" }
  },
  {
    prop: "apiType",
    label: "API类型",
    search: { el: "select" },
    enum: GetApisType,
    width: 120,
    fieldNames: { label: "name", value: "name" }
  },
  // { prop: "create_time", label: "创建时间" },
  // { prop: "remark", label: "备注" },
  { prop: "operation", label: "操作", width: 250 }
];

// ------------抽屉
const ApiRef = ref<InstanceType<typeof ApiDrawer> | null>();
const addApi = () => {
  const params: any = {
    api: AddApis,
    rowData: undefined,
    getTable: ProRef.value?.getTableList
  };
  ApiRef.value?.acceptParams(params);
};

const editApi = (row: any) => {
  const params: any = {
    api: EditApis,
    rowData: row,
    getTable: ProRef.value?.getTableList
  };
  ApiRef.value?.acceptParams(params);
};
</script>

<style></style>
